<template>
  <div class="app-container">

    <div class="filter-container">
      <!-- <el-input
        v-model="listQuery.leader"
        placeholder="包抓领导"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter" /> -->
      <el-select v-model="listQuery.leaderId" clearable placeholder="请选择领导" class="filter-item">
        <el-option
          v-for="item in leader"
          :key="item.id"
          :label="item.realname"
          :value="item.id"
          @keyup.enter.native="handleFilter"/>
      </el-select>
      <el-input
        v-model="listQuery.title"
        placeholder="事项名称"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-input
        v-model="listQuery.hostUnitName"
        placeholder="牵头单位"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-input
        v-model="listQuery.assistUnitName"
        placeholder="协办单位"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.status" clearable placeholder="请选择事项状态" class="filter-item">
        <el-option
          v-for="item in nodeStatusListOfUnit"
          :key="item.value"
          :label="item.label"
          :value="item.value" />
      </el-select>
      <br>
      <!-- <el-input
        v-model="listQuery.nodeType"
        placeholder="事项类型"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter" /> -->
      <el-select v-model="listQuery.nodetype" clearable placeholder="请选择事项类型" class="filter-item">
        <el-option
          v-for="item in nodeType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          @keyup.enter.native="handleFilter"/>
      </el-select>
      <el-date-picker
        v-model="listQuery.start"
        type="date"
        placeholder="选择开始日期"
        value-format="yyyy-MM-dd"
        class="filter-item"/>
      <el-date-picker
        v-model="listQuery.end"
        type="date"
        placeholder="选择结束日期"
        value-format="yyyy-MM-dd"
        class="filter-item"/>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter">
        {{ lang.systemManage.user.index.filters.searchBtn }}
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        type="default"
        icon="el-icon-refresh"
        @click="tableReset()">
        {{ lang.systemManage.user.index.filters.refreshBtn }}
      </el-button>
    </div>
    <div class="filter-container">
      <span class="filter-item right-btns">
        <el-button v-permission="'node-export'" v-waves type="success" @click="exportNode()"><svg-icon icon-class="download"/> 导出事项</el-button>
      </span>
    </div>
    <el-table
      v-loading="listLoading"
      :data="listQuery.list"
      :stripe="true"
      :border="true"
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <!-- <el-table-column type="index" align="center"/> -->
      <!-- <el-table-column label="一级标题" prop="firstheader" align="left" class-name="small-padding fixed-width"/>
      <el-table-column label="二级标题" prop="secondheader" align="left" class-name="small-padding fixed-width"/> -->
      <el-table-column label="事项名称" prop="title" align="left" class-name="small-padding fixed-width" min-width="150px">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.title && scope.row.title !== null && scope.row.title.length > 20" placement="bottom" effect="light">
            <div slot="content" style="max-width:500px;">{{ scope.row.title }}</div>
            <el-link type="primary" @click="goInfo(scope.row)">{{ scope.row.title.substring(0, 20) + '...' }}</el-link>
          </el-tooltip>
          <el-link v-else type="primary" @click="goInfo(scope.row)">{{ scope.row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="分管领导" prop="leaderName" align="left" class-name="small-padding fixed-width"/>
      <el-table-column label="牵头单位" prop="hostUnitName" align="left" class-name="small-padding fixed-width"/>
      <el-table-column label="协办单位" prop="assistUnitName" align="left" class-name="small-padding fixed-width"/>
      <el-table-column :formatter="formatDate" label="立项日期" prop="startdate" align="left" class-name="small-padding fixed-width"/>
      <el-table-column :formatter="formatDate" label="完成时限" prop="enddate" align="left" class-name="small-padding fixed-width"/>
      <el-table-column label="状态" prop="remark" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | nodeStatusClassFilter" size="mini">{{ scope.row.status | nodeStatusFilter }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="listQuery.total>0"
      :total="listQuery.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.rows"
      @pagination="getList" />
  </div>
</template>

<script>
import nodeApi from '@/api/node-manage/node'
import { excel } from '@/api/systemManage/nodeType'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import DelBoxMixin from '@/mixins/delBox'
import { mapGetters } from 'vuex'
import { getLeader } from '@/api/systemManage/user'
import { getNodeTypeTree } from '@/api/systemManage/nodeType'

export default {
  // name: 'NodeListManage',
  components: {
    Pagination
  },
  directives: { waves },
  mixins: [DelBoxMixin],

  props: {
    options: {
      type: Object,
      default: function() { return {} }
    }
  },

  data() {
    return {
      nodeTypeId: this.$route.meta.id,
      listLoading: true,
      isSubmitting: false,
      multipleSelection: [],
      selIds: [],
      listQuery: {},
      leader: [],
      nodeType: [],
      nodeStatusList: [
        { label: '临时保存', value: 0 },
        { label: '待收', value: 1 },
        { label: '部分接收', value: 8 },
        { label: '正在进行', value: 2 },
        { label: '按期完成', value: 3 },
        { label: '逾期进行', value: 4 },
        { label: '逾期完成', value: 5 },
        { label: '销项', value: 6 }
      ],
      nodeStatusListOfUnit: [
        { label: '临时保存', value: 0 },
        { label: '待收', value: 1 },
        { label: '正在进行', value: 2 },
        { label: '按期完成', value: 3 },
        { label: '逾期进行', value: 4 },
        { label: '逾期完成', value: 5 },
        { label: '销项', value: 6 }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'lang'
    ])
  },
  created() {
    this.tableReset()
  },
  methods: {
    tableReset() {
      this.listQuery = {
        page: 1,
        rows: 10,
        total: 0,
        leaderId: null,
        title: '',
        hostUnitName: '',
        assistUnitName: '',
        status: null,
        nodetype: null,
        list: null
      }
      this.getList()
      this.getLeaderList()
      this.getNodeType()
    },
    getList() {
      this.listLoading = true
      const params = Object.assign({}, this.listQuery)
      delete params.total
      delete params.list
      nodeApi.getPages(params).then(response => {
        this.listQuery.list = response.data.list
        this.listQuery.total = response.data.total
        this.listLoading = false
      }).catch(e => {
        this.listLoading = false
        this.$message.error(e.message)
      })
    },
    getLeaderList() {
      getLeader().then(resp => {
        debugger
        this.leader = resp.data
      }).catch(resp => {
        this.$message.error(resp.message)
      })
    },
    getNodeType() {
      getNodeTypeTree().then(resp => {
        this.nodeType = resp.data
      }).catch(resp => {
        this.$message.error(resp.message)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 时间格式化
    formatDate(row, column) {
      // 获取单元格数据
      const data = row[column.property]
      if (data === '') {
        return ''
      }
      const dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
    },
    handleSelectionChange(val) {
      this.selIds = []
      this.multipleSelection = val
      this.multipleSelection.forEach(element => {
        this.selIds.push(element.id)
      })
      console.log(val)
    },
    handleOk(formData, isEdit) {
      if (isEdit) {
      //   // edit
        this.isSubmitting = true
        nodeApi.edit(formData).then(resp => {
          this.$message.success(resp.message)
          this.isSubmitting = false
          this.$refs.editDialog.close()
          this.getList()
        }).catch(resp => {
          this.isSubmitting = false
          this.$message.error(resp.message)
        })
      } else {
      //   // add
        this.isSubmitting = true
        nodeApi.add(formData).then(resp => {
          this.$message.success(resp.message)
          this.isSubmitting = false
          this.$refs.editDialog.close()
          this.getList()
        }).catch(resp => {
          this.isSubmitting = false
          this.$message.error(resp.message)
        })
      }
    },
    add() {
      this.$refs.editDialog.show({ nodeTypeId: this.nodeTypeId })
    },
    edit() {
      if (this.multipleSelection.length > 0) {
        if (this.multipleSelection.length === 1) {
          this.$refs.editDialog.show({
            id: this.multipleSelection[0].id
          })
        } else {
          this.$message.warning('请选择单条数据操作')
        }
      } else {
        this.$message.warning('请选择要修改的数据')
      }
    },
    del() {
      if (this.multipleSelection.length > 0) {
        this.$confirm('请确认删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          nodeApi.deleteByIds({ ids: this.selIds.join(',') }).then(resp => {
            this.$alert(resp.message, '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.tableReset()
              }
            })
          }).catch(resp => {
            this.$message.error(resp.message)
          })
        })
      } else {
        this.$message.warning('请选择要删除的数据')
      }
    },
    publishOperation(flag) {
      if (this.multipleSelection.length > 0) {
        const text = flag === 1 ? '撤销' : ''
        this.$confirm(`请确认${text}发布操作, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          nodeApi.publishOperation({ ids: this.selIds.join(','), flag: flag }).then(resp => {
            this.$alert(resp.message, '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.tableReset()
              }
            })
          }).catch(resp => {
            this.$message.error(resp.message)
          })
        })
      } else {
        this.$message.warning('请选择要修改的数据')
      }
    },
    receive() {
      if (this.multipleSelection.length > 0) {
        nodeApi.receive({ ids: this.selIds.join(',') }).then(resp => {
          this.$alert(resp.message, '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.tableReset()
            }
          })
        }).catch(resp => {
          this.$message.error(resp.message)
        })
      }
    },
    exportNode() {
      const params = Object.assign({}, this.listQuery)
      delete params.total
      delete params.list
      excel(params).then(res => {
        if (!res) {
          return
        }
        var blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
        var url = window.URL.createObjectURL(blob)
        var aLink = document.createElement('a')
        aLink.style.display = 'none'
        aLink.download = '督查事项.xlsx'
        aLink.href = url
        document.body.appendChild(aLink)
        aLink.click()
      }).catch(err => {
        console.log(err)
      })
    },
    goInfo(item) {
      const id = item ? item.id : 0
      this.$router.push(`/node-manage/node-type-list/info/${id}`)
    }
  }
}
</script>
